<template>
    <div>
        <h1>用户列表</h1>
        <div>
            <el-table :data="userList" border="true">
                <el-table-column prop="id" label="用户Id" width="100">
                </el-table-column>
                <el-table-column prop="username" label="用户名" width="200">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="200">
                </el-table-column>
                <el-table-column prop="type" label="用户类型" width="100">
                </el-table-column>
                <el-table-column prop="createTime" label="用户创建时间" width="200">
                </el-table-column>
                <el-table-column label="编辑">
                    <template slot-scope="scope">
                        <el-button @click="updateUser(scope.row)" type="primary">编辑</el-button>
                        <el-button @click="deleteUser(scope.row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            userList: [
            ]
        }
    },
    methods: {
        updateUser(user){
            this.$router.push({ name: "adminUpdateUser", params: user })
        },
        getAllUser() {
            this.$axios.get("http://localhost:8000/user/getAllUsers", {
                headers: {
                    Authorization: sessionStorage.getItem('access-admin')
                }
            })
                .then(res => {
                    console.log(res)
                    this.userList = res.data
                })
                .catch(err => {
                    console.log(err)
                    this.$message.error(err.response.data.message)
                })
        },
        deleteUser(user) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete("http://localhost:8000/user/deleteUser", {
                    headers: {
                        Authorization: sessionStorage.getItem('access-admin')
                    },
                    params: {
                        id: user.id
                    }
                })
                    .then(res => {
                        console.log(res)
                        this.$router.go(0)
                    })
                    .catch(err => {
                        console.log(err)
                        this.$message.error(err.response.data.message)
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },
    created() {
        this.getAllUser()
    }
}
</script>


<style  lang="scss">
.el-table {
    width: 80%;
}
</style>